import { DateInputDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.DateInput);

## DatePicker props

`DateInput` supports most of the [DatePicker](/dates/date-picker/) props,
read through [DatePicker](/dates/date-picker/) documentation to learn about all component features that are not listed on this page.

## Usage

<Demo data={DateInputDemos.usage} />

## Value format

Use `valueFormat` prop to change [dayjs format](https://day.js.org/docs/en/display/format) of value label.
To use some custom formats, you need to enable [custom parse format](https://day.js.org/docs/en/plugin/custom-parse-format) plugin:

```tsx
// Do this once in your application root file
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';

dayjs.extend(customParseFormat);
```

Example of using DateInput with custom format:

<Demo data={DateInputDemos.format} />


## Date parser

Use `dateParser` prop to replace default date parser. Parser function accepts user input (string)
and must return `Date` object:

<Demo data={DateInputDemos.parser} />

## Allow clear

Set `clearable` prop to allow removing value from the input. Input will be cleared if
user selects the same date in dropdown or clears input value:

<Demo data={DateInputDemos.clearable} />

## Min and max date

Set `minDate` and `maxDate` props to define min and max dates. If date that is after `maxDate`
or before `minDate` is entered, then it will be considered invalid and input value will be reverted
to last known valid date value.

<Demo data={DateInputDemos.minMax} />

## Disabled state

<Demo data={DateInputDemos.disabled} />

## Input props

<InputFeatures component="DateInput" element="input" />

<Demo data={DateInputDemos.configurator} />

<GetElementRef
  component="DateInput"
  refType="input"
  package="@mantine/dates"
/>

<InputAccessibility
  component="DateInput"
  packageName="@mantine/dates"
/>
